<template>
  <el-card shadow="never" class="layout" style="width: 100%">
    <div class="pre">
      <div class="pre_title">
        <span class="title-text">
          <p>{{ props.title }}</p>
          <el-popover
            placement="top-start"
            trigger="hover"
            effect="dark"
            content="不包含退群、未授权位置信息的微信用户">
            <template #reference>
              <div><img class="help_icon" src="@/assets/image/customer/help_icon.png" alt="" /></div>
            </template>
          </el-popover>
        </span>
        <el-button @click="export2Img(myRef_one, props.title)" :disabled="!isNoMessage1">导出</el-button>
      </div>
      <div class="cust_qs">
        <el-radio-group v-model="custId" @change="changeId">
          <el-radio-button v-for="item in props.btnList" :key="item.id" :label="item.id">{{ item.text }}</el-radio-button>
        </el-radio-group>
      </div>
      <div class="min" ref="myRef_one" id="echarts"></div>
      <!-- <div class="min" v-show="isNoMessage1" ref="myRef_one" id="echarts"></div> -->
      <!-- <div class="no_data" v-show="!isNoMessage1">
        <img class="no_img" src="@/assets/noData.png" alt="" />
        <div class="no_title">暂无数据</div>
      </div> -->
    </div>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, inject, nextTick, watch } from 'vue'
import { export2Img } from '@/utils/utils'
import chinaJSON from '@/assets/js/china.json'
// import  '@/assets/js/china.js';
let echarts = inject('ec')
const myRef_one = ref()
const isNoMessage1 = ref(false)
const emit = defineEmits(['changeType'])
const props = defineProps(['title', 'browseData'])
const getEcharts2 = (data: any) => {
  if (data.length <= 0) {
    isNoMessage1.value = false
    // return
  } else {
    isNoMessage1.value = true
  }
  let myChart_one = echarts.init(myRef_one.value)
  echarts.registerMap('china', chinaJSON) //注册可用的地图
  myChart_one.setOption({
    series: [
      {
        name: props.title,
        type: 'map',
        map: 'china',
        geoIndex: 0,
        top: 100,
        zoom: 1.6, // 当前视角的缩放比例（地图的放大比例）
        roam: true, // 是否开启鼠标缩放和平移漫游
        label: {
          show: true,
          formatter({ data }: any) {
            return data?.value || ''
          }
        },
        itemStyle: {
          borderColor: '#E6824A',
          areaColor: '#F5F5F5'
        },
        data
      }
    ],
    tooltip: {
      // 鼠标移到图里面的浮动提示框
      // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
      formatter(params, ticket, callback) {
        // params.data 就是series配置项中的data数据遍历
        let localValue, perf, downloadSpeep, usability, point
        if (params.data) {
          localValue = params.data.value
        } else {
          // 为了防止没有定义数据的时候报错写的
          localValue = 0
        }
        let htmlStr = `
	             <div style='font-size:18px;'> ${params.name}</div>
	             <p style='text-align:left;margin-top:10px;'>
	               区域对应数据：${localValue}<br/>
	             </p>
	           `
        return htmlStr
      },
      backgroundColor: '#5CCEA6', //提示标签背景颜色
      textStyle: { color: '#fff' } //提示标签字体颜色
    },
    // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
    visualMap: {
      // 左下角的颜色区域
      type: 'piecewise', // 定义为分段型 visualMap
      min: 0,
      max: 1000,
      itemWidth: 40,
      bottom: 10,
      left: 10,
      pieces: [
        // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，
        // 以及每一段的文字，以及每一段的特别的样式
        { gt: 999, label: '>1000人', color: '#FF682E' }, // (1000, ]
        { gt: 100, lte: 999, label: '100-999人', color: '#FFAA89' }, // (100, 999]
        { gt: 10, lte: 99, label: '10-99人', color: '#FFD57D' }, // (10, 99]
        { gt: 0, lte: 9, label: '1-9人', color: '#FFE5DC' } // (0, 9]
      ]
    }
  })

  window.addEventListener('resize', function () {
    //执行
    if (myChart_one) {
      // 判断一下，防止在初始化的时候报错，cannot read property 'resize' of null
      myChart_one.resize()
    }
  })
}
const changeId = () => {
  emit('changeType', custId.value)
}
watch(
  () => props.browseData,
  (val) => {
    console.log(val, "中国地图数据")
    getEcharts2(val)
  }
)
</script>

<style lang="scss" scoped>
.layout {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  :deep .el-card__body {
    width: 100%;
    box-sizing: border-box;
  }
  .help_icon {
    vertical-align: baseline;
    margin: 3px 0 0 8px;
    width: 16px;
  }
  .pre {
    height: 546px;
    box-sizing: border-box;
    background: #ffffff;
    margin-bottom: 1%;
    &_title {
      // width: 100%;
      padding-bottom: 14px;
      border-bottom: 1px solid #eaeaea;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
      z-index: 9999;
    }
    .title-text {
      display: flex;
      align-items: center;
    }
    .min {
      width: 39vw;
      height: 400px;
      margin: 0 auto;
    }
  }
  .no_data {
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    .no_img {
      margin-left: 24px;
    }
    .no_title {
      color: #909399;
      font-size: 14px;
    }
  }
  .cust_qs {
    margin: 20px 0px;
  }
}
</style>
